import React, { useState, useEffect } from 'react'
import { List, Card, Row, Col, Input, Avatar, Button } from 'antd';
import { connect } from 'dva'
import { history } from 'umi'
import { getFilePrefix } from '../../utils/config';
const AttentionList = ({ attention, dispatch,userInfo }) => {
  const [attentionList, setAttentionList] = useState([])
  useEffect(() => {
    setAttentionList(attention)
  }, [attention])
  const search = (e) => {
    const value = e.target.value
    if (!value) {
      setAttentionList(attention)
    }
    else {
      const newAttentionList = attention.filter(item => item.displayName.toLowerCase().includes(value.toLowerCase()))
      setAttentionList(newAttentionList)
    }
  }
  return (
    <>
      <br /><br />
      <Row>
        <Col span={6} offset={9}>
          <Input.Search
            placeholder="请输入用户昵称"
            onChange={search}
          />
        </Col>
        <br /><br /><br /><br />
        <Col span={20} offset={2}>
          <List
            size="small"
            pagination={{
              pageSize: 5,
            }}
            dataSource={attentionList}
            renderItem={item => (
              <List.Item>
                <Card hoverable style={{ width: '100%', borderRadius: 10 }} key={item.id}
                  onClick={() => { history.push({ pathname: '/attentionList/attentionDetail', state: { targetUserId: item.userId } }) }}
                >
                  <Row>
                    <Col span={20}>
                      <Card.Meta
                        avatar={<Avatar src={item.imgFilePath === "" ? "/image/login/defaultFilePath.png" : getFilePrefix() + item.imgFilePath} alt="" />}
                        title={item.displayName}
                        description={item.signature}
                      />
                    </Col>
                    <Col span={2} offset={2}>
                      <Button type="danger" danger onClick={
                        (event) => {
                          event.stopPropagation();
                          dispatch({
                            type: 'attentionList/followUser',
                            payload: {
                              userId: userInfo.userId,
                              followerId: item.userId,
                              isFollow: false
                            }
                          })
                        }
                      }>取消关注</Button>
                    </Col>
                  </Row>
                </Card>
              </List.Item>
            )}>
          </List>
        </Col>
      </Row>
    </>
  )
}
export default connect(({ attentionList,user }) => ({
  attention: attentionList.attentionList,
  userInfo: user.userInfo,
}))(AttentionList);